<template>
  <a-modal
    v-model:open="open"
    getContainer="#app"
    :title="title"
    class="modalBox"
    @cancel="cancel"
  >
    <div class="user-page page-main">
      <search-form :model="searchParams" @search="search">
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="searchParams.username" placeholder="请输入" />
        </a-form-item>
      </search-form>

      <g-table
        ref="tableRef"
        :columns="columns"
        :api="adminList"
        :row-selection="rowSelection"
        :params="searchParams"
      />
    </div>
  </a-modal>
</template>

<script setup lang="tsx" name="customerInfo">
import { adminList } from "@/api/user";
import StatusBadge from "@/components/StatusBadge.vue";
import type { IUser } from "@/types/user";

const searchParams = reactive({
  username: "",
  order: "asc",
});
let open = $ref<boolean>(true);
const emit = defineEmits(["upImgUid", "imgClose"]);
const rowSelection = ref({
  type: "radio",
  onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
    open = false;
    emit("upImgUid", selectedRows);
  },
});
function cancel() {
  emit("imgClose");
}

const title = "管理员列表";

const { tableRef, columns, search } = useTable<IUser>([
  { title: "用户ID", dataIndex: "id", width: 80 },
  { title: "用户名", dataIndex: "account", width: 100 },
  { title: "是否接收短信", dataIndex: "deptName", width: 160 },
  { title: "最后登录IP", dataIndex: "lastIp", width: 160 },
  { title: "手机号", dataIndex: "phone", width: 140 },
  {
    title: "状态",
    dataIndex: "status",
    width: 80,
    customRender: ({ record }) => (
      <StatusBadge status={record.status ? 1 : 0} />
    ),
  },
  { title: "最后登录时间", dataIndex: "lastTime", width: 180 },
]);
defineExpose({});
</script>

<style lang="scss">
.modalBox {
  width: 700px;
  height: 900px;
  overflow-y: auto;
}
</style>
